﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>弹出层传感器设置</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap-slider.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../../static/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../../../static/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="../../../static/font-awesome-4.7.0/css/font-awesome.min.css">

	<script type="text/javascript" src="../../../static/js/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="../../../static/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../../static/js/jquery.cookie.js"></script>
	<script type="text/javascript" src="../../../static/js/zrender.js"></script>


	<script type="text/javascript" src="../../../static/layer/layer.js"></script>
	<script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap.js"></script>
	<script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"></script>
	<script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.zh-CN.js"></script>
	<script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/moment-with-locales.js"></script>
	<script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-slider.min.js"></script>
	<script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/BootstrapMenu.min.js"></script>
	<script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
	<script type="text/javascript" src="../../../static/js/utils/CommonUtils.js"></script>
	<script type="text/javascript" src="../../../static/js/utils/Base64Utils.js"></script>

	<link rel="stylesheet" type="text/css" href="../../../static/css/gy/list-style.css" />
	<link rel="stylesheet" type="text/css" href="../../../static/css/gy/doublebox-bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../../static/css/gy/select2.css" />

<!--自定义js-->
    <script src="../../../static/js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="../../../static/js/list-script.js" type="text/javascript"></script>
    <script src="../../../static/js/select2.js" type="text/javascript"></script>
</head>

<body>
	<!--传感器设置显示区域,-->
	<div id="selectTitle" class="list-select">
		<div class="list-body">
			<div class="title1">
				<span>传感器列表</span>
			</div>
			<div class="title2">
				<span>传感器分组</span>
			</div>
			<div id="sensors-list" class="item-box left-box content">
				<!-- 左边框初始化待选项 -->
			</div>
			<div class="center-box content">
				<button class="add-one" title="添加选中项">></button>
				<button class="add-all" title="添加全部">>></button>
				<button class="remove-one" title="移除选中项"><</button>
				<button class="remove-all" title="移除全部"><<</button>
			</div>
			<!-- 右边框存放已选项 -->
			<div class="item-box right-gy content">
				<ul id="tab-group" class="nav nav-tabs" role="tablist"></ul>
				<div class="tab-content"></div>
			</div>
		</div>
	</div>

</body>
<script type="text/javascript">

	//tab切换后记录下当前激活的tab id
	var tabId = "";
	//select2所有的选项值
	var select2Options = '';

	$(function() {
		//1.查询出所有的传感器信息，供tab中的select2初始化使用
		$.ajax({
			dataType : "json",
			async : false,
			type : "get",
			url : "http://localhost/consumer/CurveInfoAPI/getAllSensorName",
			success : function(result) {
				select2Options = result;
			}
		})

		//2.查询出台位对应的所有的传感器分组信息
		var primaryKey = $.cookie('nowprimarykey');
		//var primaryKey = "2017-11-1611:17:211";
		var contexts;
		$.ajax({
			dataType : "json",
			type : "get",
			//url : "http://localhost/consumer/CurveInfoAPI/getAllGroupInfoByCondition?primaryKey="+primaryKey,
			url : "http://localhost/consumer/CurveInfoAPI/getAllGroupInfoByCondition",
			data : "primaryKey=" + primaryKey,
			success : function(result) {
				for(var i=0; i<result.length; i++){
					result[i].englishname = result[i].englishname.replace(/\s*/g,"").replace(".","")
				}
				tabId = trim(result[0].englishname).replace(".","");

				var tabGroup = '<li role="presentation" class="active"><a href="#' + result[0].englishname.trim() + '" aria-controls="' + result[0].englishname.trim() + '" role="tab"  data-toggle="tab" " groupNo="' + result[0].groupno + '">' + result[0].name.trim() + '</a></li>';
				var tabContent = '<div role="tabpanel" class="tab-pane active" id="' + result[0].englishname.trim() + '" groupNo="' + result[0].groupno + '"><table id="table-sensors" class="first" border="1" bordercolor="#D9D9D9" style="text-align: center"><tr><td style="width: 200px">传感器编号</td><td style="width: 200px">传感器名称</td></tr></table></div>';

				for (var i = 1; i < result.length; i++) {
					tabGroup += '<li role="presentation"><a href="#' + result[i].englishname.trim() + '" aria-controls="' + result[i].englishname.trim() + '" role="tab" data-toggle="tab" " groupNo="' + result[i].groupno + '">' + result[i].name.trim() + '</a></li>';
					tabContent += '<div role="tabpanel" class="tab-pane" id="' + result[i].englishname.trim() + '" groupNo="' + result[i].groupno + '"><table id="table-sensors" border="1" bordercolor="#D9D9D9" style="text-align: center"><tr><td style="width: 200px">传感器编号</td><td style="width: 200px">传感器名称</td></tr></table></div>';
				}
				$("#tab-group").append(tabGroup);
				$(".tab-content").append(tabContent);

				//查询出第一个tab所有已经选中的传感器添加到tab中
				// 				$.ajax({
				// 					async : false,
				// 					dataType : "json",
				// 					type : "get",
				// 					url : "${pageContext.request.contextPath}/api/SensorInfoAPI/getSensorInfoByGroupNo",
				// 					data : "primaryKey=" + $.cookie('nowprimarykey') + "&groupNo=" + result[0].groupno,
				// 					success : function(context) {
				// 						//将数据传感器信息添加到分组
				// 						var sensorList = "";
				// 						for (var j = 0; j < context.length; j++) {
				// 							// 							tabContent += '<tr><td>' + context[j].sensorno + '</td><td><select class="form-control js-example-basic-single"><option value="volvo">' + context[j].name + '</option></select></td></tr>';
				// 							sensorList += '<tr><td class="sensorNo">' + context[j].sensorno + '</td><td><select id="' + context[j].sensorno + '" class="form-control js-example-basic-single"></select></td></tr>';
				// 						}
				// 						//追加
				// 						$(".first").append(sensorList);
				// 						contexts = context;
				// 						$(".js-example-basic-single").select2({
				// 							data : select2Options
				// 						});
				// 						$("#" + contexts[0].sensorno + " option").each(function() {
				// 							if ($(this).text() == contexts[0].name) {
				// 								$(this).attr('selected', true).trigger("change");
				// 							}
				// 						});
				// 					}
				// 				});
				// 				//遍历第一个tab下的所有的select,初始化select2并设置默认值
				// 				$(".js-example-basic-single").select2({
				// 					data : select2Options
				// 				});
				// 				for (var k = 1; k < contexts.length; k++) {
				// 					$("#" + contexts[k].sensorno + " option").each(function() {
				// 						if ($(this).text() == contexts[k].name) {
				// 							$(this).attr('selected', true).trigger("change");
				// 						}
				// 					});
				// 				}

				//为其他tab的select2赋值
				//上传tabId和primaryKey，根据tabId获取GroupNo,根据GroupNo和primaryKey获取tab下对应的传感器
				//循环所有的groupNo
				$(".right-gy").find("a").each(function() {
					var groupNo = $(this).attr("groupNo");
					// 					alert(groupNo);
					/*var primaryKey = "2017-11-1611:17:211";*/
					var primaryKey = $.cookie("nowprimarykey");
					$.ajax({
						async : false,
						dataType : "json",
						type : "get",
						url : "http://localhost/consumer/CurveInfoAPI/getSensorInfoByGroupNo",
						data : "primaryKey=" + primaryKey + "&groupNo=" + groupNo,
						success : function(result) {
							//将数据传感器信息添加到分组
							for (var i = 0; i < result.length; i++) {
								$('.list-body div[groupNo="' + groupNo + '"] #table-sensors').append('<tr><td class="sensorNo">' + result[i].sensorno + '</td><td><select id="s' + result[i].sensorno + '" class="form-control js-example-basic-single"></select></td></tr>');
								$('#s' + result[i].sensorno).select2({
									data : select2Options
								});
								$('#s' + result[i].sensorno + ' option').each(function() {
									if ($(this).text() == result[i].name) {
										$(this).attr('selected', true).trigger("change");
									}
								});
							}
						}
					});
				});
			}
		});

		//3.查询出所有的未分配的传感器信息
		$.ajax({
			dataType : "json",
			type : "get",
			url : "http://localhost/consumer/CurveInfoAPI/listUngroupedSensors?primaryKey="+primaryKey,
			//data : "primaryKey=" + primaryKey,
			success : function(result) {
				//将传感器信息显示到传感器列表
				var htmlStr = '';
				for (var i = 0; i < result.length; i++) {
					htmlStr += '<span class="item" data-id="' + result[i].sensorno + '">' + result[i].sensorno + '：' + result[i].name + '</span>';
				}
				$("#sensors-list").append(htmlStr);
				//初始化穿梭框
				$('#selectTitle').initList();
			}
		});
	})

	//3.tab点击切换事件
	$(document).on("click", 'a[data-toggle="tab"]', function(e) {
		//设置全局变量
		var target = e.target + "";
		if (target.indexOf("#") != -1) {
			var results = target.split("#");
			tabId = results[1];
		}
	});

	/* 传感器数据提交 */
	function updateSensorsData() {
		var sensorsVo = new Object();
		//获取左侧未分数的数据
		var sensors = new Array();
		$("#sensors-list .item").each(function() {
			var result = $(this).text().split("：");
			//处理字符串，生成对象
			var sensorno = result[0];
			var name = result[1];
			var sensorInfoModel = new Object();
			sensorInfoModel.sensorno = sensorno;
			sensorInfoModel.name = name;
			sensorInfoModel.selected = 0;
			sensorInfoModel.groupno = 0;
			sensors.push(sensorInfoModel);
		});

		//获取右侧数据
		$(".right-gy").find(".tab-pane").each(function() {
			// 			alert($(this).attr("groupNo"));
			var gropuNo = $(this).attr("groupNo");
			$(this).find("tr").each(function() {
				var sensorInfo = new Object();
				var sensorno;
				var name;
				$(this).children('td').each(function(index) {
					if (index == 0) {
						var colName = $(this).text();
						if (colName != "传感器编号") {
							sensorno = colName;
						}
					}
					if (index == 1) {
						var colValue = $(this).text();
						if (colValue != "传感器名称") {
							name = $(this).find("option:selected").text();
							sensorInfo.sensorno = sensorno;
							sensorInfo.name = name;
							sensorInfo.selected = 1;
							sensorInfo.groupno = gropuNo;
							sensors.push(sensorInfo);
						}
					}
				});
			});
		});
		sensorsVo.primaryKey = $.cookie('nowprimarykey');
		sensorsVo.sensors = sensors;
		//提交表单数据
		var flag = "";
		$.ajax({
			async : false,
			// 			dataType : "json",
			type : "POST",
			contentType : "application/json; charset=UTF-8",
			url : "http://localhost/consumer/CurveInfoAPI/updateSensorsByPrimaryKey",
			data : JSON.stringify(sensorsVo),
			success : function(result) {
				flag = result;
			},
			error : function() {
				flag = "error";
			}
		});

		return flag;
	}
</script>
</html>
